// pages/shijihai/nuit5/case5-3-3/case5-3-3.js
var ctx=wx.createCanvasContext ('myCanvas')
Page({
    clear:function () {
        ctx.draw() 
    },
    drawDot:function (e) {
       ctx.arc(200,200,10,0,2*Math.PI)
       ctx.setFillStyle('black') 
       ctx.fill()
       ctx.draw()
    },
    drawCircle:function (e) {
        ctx.setFillStyle('black')
        ctx.arc(200,200,10,0,2*Math.PI)
        ctx.fill()
        ctx.setStrokeStyle('red')
        ctx.moveTo(300,200)
        ctx.arc(200,200,10,0,2*Math.PI)
        ctx.stroke()
        ctx.draw()
     },
     drawDash:function () {
        ctx.setStrokeStyle('red')
        ctx.setLineDash ([20,10])
        ctx.setLineWidth(10)
        ctx.moveTo(50,100)
        ctx.lineTo(250,100)
        ctx.lineTo(150,300)
        ctx.lineTo(20,100)
        ctx.stroke()
        ctx.draw()
        ctx.setLineDash([0,0])
        ctx.setLineWidth(1)
     },
     drawText:function () {
         ctx.setFillStyle('red')
         ctx.setFontSize(40)
         ctx.setTextBaseline('bottom')
         ctx.fillText('北方工业大学',80,80)
         ctx.setFillStyle('yellow')
         ctx.setTextBaseline('top')
         ctx.fillText('北方工业大学',80,80)
         ctx.setFillStyle('black')
         ctx.rotate(30*Math.PI/180)
         ctx.fillText('北方工业大学',150,80)
         ctx.draw()
     },
     circularGrad:function () {
         var grd=ctx.createCircularGradient(175,175,125)
         grd.addColorStop(0,'purple')
         grd.addColorStop(1,'white')
         ctx.setFillStyle(grd)
         ctx.fillRect(50,50,250,250)
         ctx.draw()
     },
     translucent:function () {
         ctx.setFillStyle('red')
         ctx.setGlobalAlpha(0.2)
         ctx.fillRect(50,50,250,250)
         ctx.draw()
         ctx.setGlobalAlpha(1)
     },
     capAndJoin:function () {
         ctx.setStrokeStyle('red')
         ctx.setLineWidth(20)
         ctx.setLineCap('round')
         ctx.setLineJoin('miter')
         ctx.moveTo(50,50)
         ctx.lineTo(250,250)
         ctx.lineTo(50,250)
         ctx.lineTo(250,250)
         ctx.stroke()
         ctx.draw()
         ctx.setLineWidth(1)
         ctx.setLineCap('butt')
         ctx.setLineJoin('mitter')
     },
    /**
     * 页面的初始数据
     */
    data: {

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})